<template>
  <div class="note-card">
    <bili-card v-if="note.kind == NoteKind.VLink" :note="note"></bili-card>
    <div v-if="note.kind != NoteKind.VLink">
      <div class="note-card-content">
        <div v-html="mdContent"></div>
      </div>
      <div class="note-card-toolbar">
        <ri i="delete" class="right" @click="removeNote"></ri>
        <ri i="edit" class="right" @click="editNote"></ri>
        <vsep class="right"></vsep>
        <span class="date right">{{ note.modtime }}</span>
        <span class="right" v-for="(a,i) in note.authors" :key="i">
          <a class="note-author" :href="'/#/people/view/' + a.id">{{a.fullname}}</a>
        </span>
        <span class="right">——</span>
      </div>
    </div>
  </div>
</template>

<script>
import Markdown from "@/js/markdown/markdown.js";
import BiliCard from "../tools/BiliCard.vue";
import { NoteKind } from "@js/constants.js";
export default {
  components: { BiliCard },
  props: ["note"],
  data() {
    return {
      NoteKind: NoteKind,
    };
  },
  computed: {
    noteType() {
      if (this.note.ntype == 1) {
        return "笔记";
      } else if (this.note.ntype == 2) {
        return "注音";
      } else if (this.note.ntype == 3) {
        return "引用";
      } else if (this.note.ntype == 4) {
        return "翻译";
      } else {
        return "笔记";
      }
    },
    noteTypeClass() {
      if (this.note.ntype == 1) {
        return "";
      } else if (this.note.ntype == 2) {
        return "phonetics";
      } else if (this.note.ntype == 3) {
        return "reference";
      } else if (this.note.ntype == 4) {
        return "translation";
      } else {
        return "";
      }
    },
    mdContent() {
      return Markdown.render(this.note.content);
    },
  },
  methods: {
    removeNote() {
      this.$confirm("确认删除该笔记？").then(() => {
        let noteid = this.note.id;
        this.authGet("/api/v1/note/remove/" + noteid)
          .then(() => {
            this.$emit("removed", this.note);
          })
          .catch(() => {});
      });
    },
    editNote() {
      console.log("editing note");
      this.$emit("edit-note", this.note);
    },
  },
};
</script>

<style lang="stylus">
.note-card
  padding 10px 0px
  margin-bottom 20px
  border-bottom 1px dashed #D9ECFF
  border-radius 2px

  .note-card-content
    margin-bottom 10px
    padding 5px 0px
    color #666

  .note-card-toolbar
    line-height 1.2em
    height 1.2em
    font-size 0.9em

    >span
      margin-left 5px

    .date
      font-size 0.8em

    .right
      float right
      color #999

    .note-author
      color #409EFF

    svg
      cursor pointer
      margin-left 5px
</style>